<!--  -->
<template>
  <div class="collapse-host-info-setup">
    <el-form :model="form" v-loading="loading" :rules="rules" ref="collapseinfo">
      <el-form-item label="运营类型" :label-width="formLabelWidth">
        <el-radio v-model="form.baseType" :label="1">公司企业</el-radio>
        <el-radio v-model="form.baseType" :label="2">个体经营</el-radio>
      </el-form-item>

      <div v-if="form.baseType === 1">
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          <el-input v-model="form.companyInfo.name" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;"></el-input>
        </el-form-item>
        <el-form-item label="中文简称" :label-width="formLabelWidth">
          <el-input v-model="form.companyInfo.sname" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="companyInfo.tel">
          <el-input v-model.trim="form.companyInfo.tel" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱" :label-width="formLabelWidth" prop="companyInfo.email">
          <el-input v-model.trim="form.companyInfo.email" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;"></el-input>
        </el-form-item>
        <el-form-item label="经营范围" :label-width="formLabelWidth">
          <el-input v-model="form.companyInfo.business" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;"></el-input>
        </el-form-item>
        <el-form-item label="成立时间" :label-width="formLabelWidth">
          <el-input v-model="form.companyInfo.establishment" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;">
          </el-input>
        </el-form-item>
        <el-form-item label="注册地" :label-width="formLabelWidth">
          <el-input v-model="form.companyInfo.registered" size="medium" maxlength="100" placeholder="请输入内容"
            style="width:50%;">
          </el-input>
        </el-form-item>
      </div>
      <!-- <div v-if="form.baseType === 2"> -->
      <el-form-item v-if="form.baseType === 2" label="运营主体" :label-width="formLabelWidth">
        <el-input v-model="form.personalInfo.name" size="medium" maxlength="100" placeholder="请输入内容" style="width:50%;">
        </el-input>
      </el-form-item>
      <el-form-item v-if="form.baseType === 2" label="联系电话" :label-width="formLabelWidth" prop="personalInfo.tel">
        <el-input v-model.trim="form.personalInfo.tel" size="medium" maxlength="100" placeholder="请输入内容"
          style="width:50%;"></el-input>
      </el-form-item>
      <el-form-item v-if="form.baseType === 2" label="联系邮箱" :label-width="formLabelWidth" prop="personalInfo.email">
        <el-input v-model.trim="form.personalInfo.email" size="medium" maxlength="100" placeholder="请输入内容"
          style="width:50%;">
        </el-input>
      </el-form-item>
      <!-- </div> -->
    </el-form>
    <div class="group-button">
      <el-button type="primary" @click="onSubmitData" size="small">更 新</el-button>
    </div>
  </div>
</template>

<script>
export default {
  created () {
    this.getData()
  },
  data () {
    var checkEmail = (rule, value, callback) => {
      let emailReg = /^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (emailReg.test(value) || value === '') {
        return callback()
      } else {
        callback(new Error('邮箱格式错误'))
      }
    }
    var checkPhone = (rule, value, callback) => {
      let tel = /^(([0-1]?[0-9]{10})|(([0-9]{3,4}-)?[0-9]{11})|(((([0-9]{3,4}-)?[0-9]{7,8})|(([0-9]{3}-)?[0-9]{4}(-[0-9]{3}))|(([0-9]{4}-)?[0-9]{7}))(-[0-9]{1,4})?)|(\+86[0-9]{7,11}))$/
      if (value === '' || tel.test(value)) {
        return callback()
      } else {
        callback(new Error('请输入有效的号码！'))
      }
    }
    return {
      loading: true,
      formLabelWidth: '120px',
      form: {
        baseType: 1,
        companyInfo: {
          name: '',
          sname: '',
          tel: '',
          email: '',
          business: '',
          establishment: '',
          registered: ''
        },
        personalInfo: {
          name: '',
          tel: '',
          email: ''
        }
      },
      rules: {
        'companyInfo.tel': [
          { required: false, validator: checkPhone, trigger: 'blur' }
        ],
        'companyInfo.email': [
          { required: false, validator: checkEmail, trigger: 'blur' }
        ],
        'personalInfo.tel': [
          { required: false, validator: checkPhone, trigger: 'blur' }
        ],
        'personalInfo.email': [
          { required: false, validator: checkEmail, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'form.baseType': {
      handler (newValue, oldValue) {
        if (newValue !== oldValue) {
          if (this.$refs['collapseinfo']) {
            this.$refs['collapseinfo'].clearValidate()
          }
        }
      },
      deep: true
    }
  },
  methods: {
    getData () {
      // 请求获取技术信息数据
      if (!this.loading) {
        this.loading = true
      }
      //
      this.$post('/baseinfo/get-base-info').then(response => {
        if (response && response.config && response.companyInfo && response.personalInfo) {
          this.form = JSON.parse(JSON.stringify(initForm(response)))
        }
        this.loading = false
      })
    },
    // 请求后台
    onSubmitData () {
      this.loading = true
      this.$refs['collapseinfo'].validate((valid) => {
        if (valid) {
          let param = JSON.parse(JSON.stringify(this.form))
          this.$jpost('/baseinfo/save-base-info', param).then(response => {
            // 调用iframe端执行 vueFunc 中的 renderLogo 方法
            this.loading = false
          })
        } else {
          this.loading = false
        }
      })
    }
  }
}

function initForm (response) {
  return {
    baseType: response.config.baseInfoType,
    companyInfo: {
      name: response.companyInfo.name,
      sname: response.companyInfo.sname,
      tel: response.companyInfo.tel,
      email: response.companyInfo.email,
      business: response.companyInfo.business,
      establishment: response.companyInfo.establishment,
      registered: response.companyInfo.registered
    },
    personalInfo: {
      name: response.personalInfo.name,
      tel: response.personalInfo.tel,
      email: response.personalInfo.email
    }
  }
}

</script>

<style scoped>
.collapse-host-info-setup .group-button {
  text-align: left;
  margin-left: 120px;
}
.collapse-host-info-setup /deep/ .el-form-item {
  margin-bottom: 15px;
}
</style>
